body{
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 100vh;
    background-color: #f8f005;
}
button,button::after{
    position: relative;
    width: 380px;
    height: 86px;
    font-size: 36px;
    font-family: 'Bebas Neuc',cursive;
    /* 这里改为5%，可以做到只有左下角一点的颜色变化 */
    background: linear-gradient(45deg,transparent 5%,#FF013c 5%);
    border: 0;
    color: #fff;
    /* 这里设置字体间距 */
    letter-spacing: 3px;
    line-height: 88px;
    box-shadow: 6px 0px 0px #00E6F6;
    outline: transparent;
}
/* 想要将按钮设置为一个朋克破坏风，先将上面重叠一个一摸一样的按钮 */
button::after{
    /* 保存切下来的元素的数据，一共五个切片，一个预设值 */
    --slice-0: inset(50% 50% 50% 50%);
    --slice-1: inset(80% -6px 0 0);
    --slice-2: inset(50% -6px 30% 0);
    --slice-3: inset(10% -6px 85% 0);
    --slice-4: inset(40% -6px 43% 0);
    --slice-5: inset(80% -6px 5% 0);

    content: 'AVAILABLE NOW';
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    /* 可以确定元素已经重叠 */
    /* background: #000; */
    background: linear-gradient(45deg,transparent 3%,#00E6F6,#00E6F6 5%,#FF013c 5%);
    text-shadow: -3px -3px 0px #F8F005, 3px 3px 0px #00E6F6;
    /* 四个值分别为上下左右，就是向内缩小多少的意思 */
    /* 因为右边有一个6px的蓝色边框不在容器的计算范围之内 */
    clip-path: var(--slice-0);
    /* 由于元素在重叠状态所以看不出来切割的部分，可以移动一下元素就可以看到 */
    /* transform: translate(-20px,10px); */
}
button:hover::after{
    animation: 1s glitch;
    animation-timing-function: steps(2,end);
}
@keyframes glitch {
    0%{
        clip-path: var(--slice-1);
        transform: translate(-20px,-10px);
    }
    10%{
        clip-path: var(--slice-3);
        transform: translate(-5px,-10px);
        
    }
    20%{
        clip-path: var(--slice-2);
        transform: translate(-10px,-10px);
    }
    30%{
        clip-path: var(--slice-4);
        transform: translate(-5px,-5px);
    }
    40%{
        clip-path: var(--slice-2);
        transform: translate(-10px,-0px);
    }
    50%{
        clip-path: var(--slice-3);
        transform: translate(-10px,px);
    }
    60%{
        clip-path: var(--slice-1);
        transform: translate(-4px,-8px);
    }
    70%{
        clip-path: var(--slice-3);
        transform: translate(-15px,0px);
    }
    80%{
        clip-path: var(--slice-4);
        transform: translate(-15px,-10px);
    }
    90%{
        clip-path: var(--slice-2);
        transform: translate(-10px,10px);
    }
    100%{
        clip-path: var(--slice-1);
        transform: translate(-5px,0px);
    }
}


